import React, { useEffect, useState } from 'react'
import Hoc_login from "@/utils/Hoc_login"
import { Button, Input, Select, Space, Table } from 'antd';
import type { TableProps } from 'antd';
import { getOrder } from '@/api';

function Index() {
  // 订单数据
  const [order, setOrder] = useState()
  // 搜索框数据
  const [uidData, setUidData] = useState("")

  useEffect(() => {
    (
      async () => {
        let res = await getOrder([])
        setOrder(res.data.data.map((item: any) => {
          item.key = item.id
          return item
        }))
      }
    )()
  }, [])

  const columns: TableProps<any>['columns'] = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      width: 250,
    },
    {
      title: '用户名',
      dataIndex: 'uid',
      key: 'uid',
    },
    {
      title: '手机号',
      dataIndex: 'mobile',
      key: 'mobile',
    },
    {
      title: '类型',
      dataIndex: 'categray',
      key: 'categray',
      render: (_, record) => {
        if (record.categray == 0) {
          return <div>有房出租</div>
        } else if (record.categray == 1) {
          return <div>二手房出租</div>
        } else if (record.categray == 2) {
          return <div>我想租个房</div>
        }
      }
    },
    {
      title: '支付金额',
      dataIndex: 'payment',
      key: 'payment',
      render: (text) => <span>{text} ￥</span>
    },
    {
      title: '支付时间',
      dataIndex: 'update_time',
      key: 'update_time',
    },
    {
      title: '操作',
      key: 'action',
      render: (record) => (
        <Space size="middle">
          <a >查看</a>
        </Space>
      ),
    },
  ];

  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
  };

  const handleChange2 = (e: any) => {
    setUidData(e.target.value)
  }
  // 查询
  const btnCha = async () => {
    let res = await getOrder({ uid: uidData })
    console.log(res)
  }

  return (
    <div>
      <p>订单管理</p>

      订单类型：
      <Select
        defaultValue="请选择"
        style={{ width: 200 }}
        onChange={handleChange}
        options={[
          { value: '请选择', label: '请选择' },
          { value: '有房出租', label: '有房出租' },
          { value: '二手房出租', label: '二手房出租' },
          { value: '我想租个房', label: '我想租个房' },
        ]}
      />&emsp;

      搜索:
      <Input placeholder='请输入手机号/用户名/订单号' style={{ width: 200 }} onChange={handleChange2} />

      <Button type='primary' onClick={btnCha}>查询</Button>

      {/* 表格 */}
      <Table columns={columns} dataSource={order} bordered />
    </div>
  )
}

export default Hoc_login(Index)
